<template>
  <div class="isbody">
    <div class="body-Left">
      <h4>库区选择</h4>
      <el-select v-model="queryFrom.warehouseId" placeholder="请选择" @change="optionChange">
        <el-option
          v-for="item in queryList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <div class="left-bottom">
        <el-input
          v-model="queryFrom.name"
          placeholder="请输入库区的名称"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" />
        </el-input>
        <div v-if="isdisplay"><el-button v-for="(item,index) in searchList" :key="item.id" class="button elbutton" :class="{color :isbool === index }" @click="colorList(index,item.id)">{{ item.name }}</el-button></div>
        <div v-else>
          <div class="else">
            <div>暂无库区</div>
            <el-button type="success" round @click="addList">新增库区</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="body-center" />
    <div class="body-right">
      <div class="right">
        <h3>库区总览</h3>
        <div class="boxs">
          <div class="footer">
            <div>库存总计: {{ numFrom.free || 0 }} </div>
          </div>
          <div class="footer">
            <div class="box" />
            <div>停用库位: {{ numFrom.stop || 0 }}</div>
          </div>
          <div class="footer">
            <div class="box2" />
            <div>占用库位: {{ numFrom.use || 0 }}</div>
          </div>
          <div class="footer">
            <div class="box3" />
            <div>空闲库位: {{ numFrom.total || 0 }}</div>
          </div>
        </div>
      </div>
      <div>
        <div v-if="isYes" class="isbox">
          <div v-for="(item,index) in numFrom.stop" :key="index" class="stop" />
          <div v-for="(item,index) in numFrom.use" :key="index" class="use" />
          <div v-for="(item,index) in numFrom.num" :key="index" class="total" />
        </div>
        <div v-else class="boxFooter">

          <div class="img" />
          <div class="txt">暂无库位</div>
          <el-button type="success" round @click="addSearch">新增库位</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { viewApi, outboundBuffer, numViewApi } from '@/api/manage-base-info.js'
export default {
  data() {
    return {
      isbool: 0,
      queryList: [],
      searchList: [],
      numFrom: {},
      queryFrom: {
        warehouseId: '798976929725153313',
        status: 1
      },
      isdisplay: true,
      isYes: true
    }
  },
  watch: {

  },
  async created() {
    this.getoutboundBuffer()
    const res = await viewApi()
    this.queryList = res.data
  },
  methods: {
    async getoutboundBuffer() {
      try {
        const res = await outboundBuffer(this.queryFrom)
        this.searchList = res.data
        const res2 = await numViewApi(this.searchList[0].id).catch(err => console.log(err))
        this.numFrom = res2.data
        this.numFrom.num = this.numFrom.total - this.numFrom.use
        this.isdisplay = true
        this.isYes = true
        if (this.numFrom.free === 0 && this.numFrom.num === 0 && this.numFrom.stop === 0 && this.numFrom.total === 0 && this.numFrom.use === 0) {
          this.isYes = false
        } else {
          this.isYes = true
        }
      } catch (err) {
        this.numFrom = {}
        this.searchList = []
        console.log(this.searchList)
        this.isdisplay = false
        this.isYes = false
      }
    },
    async  colorList(index, id) {
      try {
        this.isbool = index
        const res2 = await numViewApi(id).catch(err => console.log(err))
        this.numFrom = res2.data
        this.numFrom.num = this.numFrom.total - this.numFrom.use
        console.log(this.numFrom)
        if (this.numFrom.free === 0 && this.numFrom.num === 0 && this.numFrom.stop === 0 && this.numFrom.total === 0 && this.numFrom.use === 0) {
          this.isYes = false
        } else {
          this.isYes = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    optionChange() {
      this.getoutboundBuffer()
    },
    addList() {
      this.$router.push({ name: 'area/detaill', params: { id: 'null' }})
    },
    addSearch() {
      this.$router.push({ name: 'location/detaill', params: { id: 'null' }})
    }
  }
}
</script>

<style lang="scss" scoped>
.isbody{
  padding: 20px;
  height: 93vh;

}
.body-Left{
  padding: 17px 20px 27px 20px;
  float: left;
  width: 263px;
  height: 100%;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
}
.body-center{
  float: left;
    width: 10px;
    height: 100%;
    background: linear-gradient(270deg,hsla(0,0%,100%,0),rgba(99,97,96,.1));
}
.body-right{
  // float: right;
  padding: 27px 19px 27px 300px;
  width: 100%;
  border-radius: 20px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);

}
.el-select{
  width: 100%;
}
.left-bottom{
  width: 224px;
    background: #fdfcf9;
    border: 1px solid #f7f2f1;
    border-radius: 6px;
    padding: 30px 29px 0 26px;
    height: 86%;
    margin-top: 20px;
}
.elbutton {
  width: 140px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
    margin: 0 auto;
    margin-top: 20px;
    font-size: 13px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #ffb200;
    line-height: 40px;
    cursor: pointer;
    line-height: 17px;
}
.color{
  background-color: #f4b53f;
  color: #000;
}
.box{
  background-color: rgb(195, 195, 195);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-top: 3px;
}
.box2{
  background-color: rgb(0, 190, 118);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-top: 3px;
}
.box3{
  background-color: rgb(178, 220, 204);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-top: 3px;
}
.footer{
  width: 100px;
  display: flex;
  justify-content: space-between;
}
.right{
  display: flex;
  justify-content: space-between;
  width: 800px;
}
.boxs{
  width: 600px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.stop{
  width: 36px;
    height: 36px;
    border-radius: 7px;
    background-color: #c3c3c3!important;
}
.use{
  width: 36px;
    height: 36px;
    border-radius: 7px;
  background-color: rgb(0, 190, 118);
}
.total{
  width: 36px;
    height: 36px;
    border-radius: 7px;
    background-color: #b2dccc!important;
}
.isbox{
  // width: 310px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 40px;
}
.else{
  text-align: center;
  margin-top: 280px;
  div{
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC,PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #b5abab;
    line-height: 20px;
    margin: 0 auto;
    margin-bottom: 19px;
  }
  .el-button {
    width: 120px;
  }
}
.boxFooter{
  border-top: 1px solid #f5efee;
    padding: 100px 0;
    margin: 0 auto;
    color: #b5abab;
    font-size: 14px;
    text-align: center;

    .img{
      width: 160px;
    height: 160px;
    display: inline-block;
    background: url(http://www-wms-java.itheima.net/img/empty.4300e933.png) no-repeat;
    background-size: contain;
    margin-bottom: 15px;
    }
    .txt{
      color: #b5abab;
    font-size: 14px;
    margin-bottom: 15px;

    }
}
</style>
